<template>
  <div class="navbar" :class="isCollapse ? 'Collapse' : ''">
    <dl>
      <dd @mouseenter="item.hover = true" @mouseleave="item.hover = false" v-for="(item, index) in navlist"
        :key="index">
        <template v-if="isCollapse">
          <div @click.stop="item.callback(index, item)">
            <div>
              <NuxtImg v-if="item.open || item.hover" :src="`/img/${item.imghover}`" alt="" />
              <NuxtImg v-else :src="`/img/${item.img}`" alt="" />

              <span v-if="isCollapse" :class="item.open || item.hover ? 'active' : ''">{{ $t(item.lang) }}</span>
            </div>
            <!-- :class="item.open || item.hover ? 'active' : ''" -->
            <el-icon size="12" v-if="isCollapse && item.children.length > 0" :class="item.open ? 'rotate' : ''"
              color="#98a7b5">
              <ArrowDown />
            </el-icon>
          </div>
          <ul class="iscollpse" :style="{ height: item.open ? item.children.length * 40 + 'px' : '0px' }">
            <li @click.stop="items.callback(item.lang + index)" @mouseenter="items.hover = true"
              @mouseleave="items.hover = false" v-for="(items, index) in item.children" :key="item.lang + index">
              <NuxtImg v-if="activechildren == item.lang + index || items.hover" :src="`/img/${items.imghover}`"
                alt="" />
              <NuxtImg v-else :src="`/img/${items.img}`" alt="" />
              <span :class="activechildren == item.lang + index || items.hover ? 'active' : ''
    ">{{ $t(items.lang) }}</span>
            </li>
          </ul>

        </template>
        <template v-else>

          <el-tooltip v-if="item.children.length == 0" class="box-item" effect="dark" :content="$t(item.lang)"
            placement="right-start">
            <div @click.stop="item.callback(index, item)">
              <div>
                <NuxtImg v-if="item.open || item.hover" :src="`/img/${item.imghover}`" alt="" />
                <NuxtImg v-else :src="`/img/${item.img}`" alt="" />

                <span v-if="isCollapse" :class="item.open || item.hover ? 'active' : ''">{{ $t(item.lang) }}</span>
              </div>
              <!-- :class="item.open || item.hover ? 'active' : ''" -->
              <el-icon size="12" v-if="isCollapse && item.children.length > 0" :class="item.open ? 'rotate' : ''"
                color="#98a7b5">
                <ArrowDown />
              </el-icon>
            </div>

          </el-tooltip>
          <template v-else>
            <div @click.stop="item.callback(index, item)">
              <div>
                <NuxtImg v-if="item.open || item.hover" :src="`/img/${item.imghover}`" alt="" />
                <NuxtImg v-else :src="`/img/${item.img}`" alt="" />

                <span v-if="isCollapse" :class="item.open || item.hover ? 'active' : ''">{{ $t(item.lang) }}</span>
              </div>
              <!-- :class="item.open || item.hover ? 'active' : ''" -->
              <el-icon size="12" v-if="isCollapse && item.children.length > 0" :class="item.open ? 'rotate' : ''"
                color="#98a7b5">
                <ArrowDown />
              </el-icon>
            </div>
            <ul class="nocollpse" :class="item.hover ? 'ishover' : ''"
              :style="{ height: item.hover ? item.children.length * 40 + 'px' : '0px' }">
              <li @click.stop="items.callback(item.lang + index)" @mouseenter="items.hover = true"
                @mouseleave="items.hover = false" v-for="(items, index) in item.children" :key="item.lang + index">
                <NuxtImg v-if="activechildren == item.lang + index || items.hover" :src="`/img/${items.imghover}`"
                  alt="" />
                <NuxtImg v-else :src="`/img/${items.img}`" alt="" />
                <span :class="activechildren == item.lang + index || items.hover ? 'active' : ''
    ">{{ $t(items.lang) }}</span>
              </li>
            </ul>
          </template>
        </template>

      </dd>
      <dd style="flex:1"></dd>
    </dl>

  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { reactive, watch,ref,shallowRef } from "vue"


const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
//打开转盘
let emit = defineEmits(["openturn", "openTerouro", "openTask", "openlogin", 'openRanking']);
// 是否展开导航栏
// 本地存储方案一
// let isCollapse = useIsCollapse()
// 本地存储方案二
const store = useStore()
let istoken = computed<string|null|undefined>(() => store.token)
let isCollapse = computed<boolean>(() => store.IsCollapse)
//导航栏点击
let activechildren = shallowRef<string>("");
let activefathen = shallowRef<number>(99);
let navClick = (index: number): void => {
  activefathen.value = index
  navlist = navlist.map((i, id) => {
    if (id != index) {
      i.open = false;
      i.hover = false
    }
    return i;
  });
  navlist[index]["open"] = !navlist[index]["open"];
  navlist[index]["hover"] = !navlist[index]["hover"];
};
watch(() => isCollapse.value, (newval) => {
  if (!newval) {
    navlist = navlist.map((i, id) => {
      if (id != activefathen.value) {
        i.open = false;
        i.hover = false
      }
      return i;
    });
  }
})
let navlist = reactive([
  {
    lang: "language.nav.nav1",
    img: "nav1.gif",
    imghover: "nav1.gif",
    name: "",
    open: false,
    hover: false,
    callback: (index: number, item: any): void => {

      // emit("openturn", true);
      store.$patch({turnTable:true})
      if (isCollapse.value) {
        navClick(index);
      }
    },
    children: [],
  },
  {
    lang: "language.nav.nav2",
    img: "nav2.png",
    imghover: "nav2.png",
    name: "",
    hover: false,
    open: false,
    children: [],
    callback: async (index: number, item: any) => {
      if (istoken.value == "") {
        store.loginopen = true
        return
      }
      store.$patch({terouro:true})
      // emit("openTerouro", true);
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
  },
  {
    lang: "language.nav.nav3",
    img: "nav3.png",
    imghover: "nav3l.png",
    name: "",
    hover: false,
    open: false,
    callback: (index: number, item: any): void => {
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
    children: [
      {
        lang: "language.nav.nav3children1",
        img: "nav3-1.png",
        imghover: "nav3-1l.png",
        hover: false,
        name: "",
        callback: (index: string) => {
          activechildren.value = index;
          console.log(activechildren.value);

        },
      },
      {
        lang: "language.nav.nav3children2",
        img: "nav3-2.png",
        imghover: "nav3-2l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
      {
        lang: "language.nav.nav3children3",
        img: "nav3-3.png",
        imghover: "nav3-3l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children3'})
        },
      },
      {
        lang: "language.nav.nav3children4",
        img: "nav3-4.png",
        imghover: "nav3-4l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children4'})
        },
      },
      {
        lang: "language.nav.nav3children5",
        img: "nav3-5.png",
        imghover: "nav3-5l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children5'})
        },
      },
      {
        lang: "language.nav.nav3children6",
        img: "nav3-6.png",
        imghover: "nav3-6l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children6'})
        },
      },
      {
        lang: "language.nav.nav3children7",
        img: "nav3-7.png",
        imghover: "nav3-7l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children7'})
        },
      },
      {
        lang: "language.nav.nav3children8",
        img: "nav3-8.png",
        imghover: "nav3-8l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children8'})
        },
      },
      {
        lang: "language.nav.nav3children9",
        img: "nav3-9.png",
        imghover: "nav3-9l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children9'})
        },
      },
      {
        lang: "language.nav.nav3children10",
        img: "nav3-10.png",
        imghover: "nav3-10l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
          $openPage('/commonPage',{name:'language.nav.nav3children10'})
        },
      },
      {
        lang: "language.nav.nav3children11",
        img: "nav3-11.png",
        imghover: "nav3-11l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
    ],
  },
  {
    lang: "language.nav.nav4",
    img: "nav4.png",
    imghover: "nav4l.png",
    open: false,
    hover: false,
    name: "",
    callback: (index: number, item: any): void => {
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
    children: [
      {
        lang: "language.nav.nav4children1",
        img: "nav4-1.png",
        imghover: "nav4-1l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
      {
        lang: "language.nav.nav4children2",
        img: "nav4-2.png",
        imghover: "nav4-2l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
      {
        lang: "language.nav.nav4children3",
        img: "nav4-3.png",
        imghover: "nav4-3l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
      {
        lang: "language.nav.nav4children4",
        img: "nav4-4.png",
        imghover: "nav4-4l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
      {
        lang: "language.nav.nav4children5",
        img: "nav4-5.png",
        imghover: "nav4-5l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          activechildren.value = index;
        },
      },
    ],
  },
  {
    lang: "language.nav.nav5",
    img: "nav5.png",
    imghover: "nav5l.png",
    open: false,
    hover: false,
    name: "",
    callback: (index: number, item: any): void => {

      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
    children: [
      {
        lang: "language.nav.nav5children1",
        img: "nav5-1.png",
        imghover: "nav5-1l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          $openPage('/activity')
          activechildren.value = index;
        },
      },
      {
        lang: "language.nav.nav5children2",
        img: "nav5-2.png",
        imghover: "nav5-2l.png",
        name: "",
        hover: false,
        callback: (index: string) => {
          emit('openRanking', true)
          console.log(323223);

          activechildren.value = index;
        },
      },
    ],
  },
  {
    lang: "language.nav.nav6",
    img: "nav6.png",
    imghover: "nav6l.png",
    hover: false,
    callback: (index: number, item: any): void => {
      $openPage('/business')
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }

    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav7",
    imghover: "nav7l.png",
    img: "nav7.png",
    hover: false,
    callback: (index: number, item: any): void => {
      store.$patch({task:true})
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }

    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav8",
    imghover: "nav8l.png",
    img: "nav8.png",
    hover: false,
    callback: (index: number, item: any): void => {
      // console.log('/user/vip');
      $openPage('/user/vip')
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav9",
    imghover: "nav9l.png",
    img: "nav9.png",
    hover: false,
    callback: (index: number, item: any): void => {
      $openPage('/user/share')
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav10",
    imghover: "nav10l.png",
    img: "nav10.png",
    hover: false,
    callback: (index: number, item: any): void => {
      $openPage('/download')
      if (isCollapse.value) {
        navClick(index);
        console.log(item);
      }
    },
    open: false,
    name: "",
    children: [],
  },
]);

</script>
<style scoped lang='scss'>
.navbar {
  min-width: 64px;

  height: calc(100vh - 60px);
  overflow: visible;
  background-color: #1a1a1a;
  position: fixed;
  left: 0;
  z-index: 14;
  top: 60px;

  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }



  dl {
    width: 218px;
    min-width: 64px;
    min-height: calc(100vh - 60px);
    width: 64px;
    overflow: visible;
    transition: all 0.2s linear;
    @include flex(column, flex-start, center);

    dd {
      min-height: 40px;
      width: 100%;
      margin-top: 5px;
      background-color: #fff;
      @include flex(column, flex-start, center);
      background-color: rgb(32, 34, 38);
      position: relative;
      overflow: visible;

      .el-icon {
        transition: all 0.3s;
      }

      .rotate {
        transform: rotate(180deg);
      }

      .iscollpse {

        width: 100%;
        background-color: rgb(32, 34, 38);
        transition: all 0.2s ease-in-out;
        height: 0;
        overflow: hidden;
        li {
          padding-left: 40px;

          &:hover {
            background-color: rgb(26, 27, 30);

            span {
              color: #fff;
            }
          }

          height: 40px;
          @include flex(row, flex-start, center);
          cursor: pointer;


          img {
            width: 20px;
            margin-right: 10px;
          }

          .active {
            color: #fff;
          }

          span {
            font-size: 14px;
            color: #98a7b5;
          }
        }
      }



    
      .iscollpse {
        width: 100%;
        background-color: rgb(32, 34, 38);
        transition: all 0.2s linear;
        height: 0;
        overflow: hidden;
        li {
          padding-left: 40px;

          &:hover {
            background-color: rgb(26, 27, 30);

            span {
              color: #fff;
            }
          }

          height: 40px;
          @include flex(row, flex-start, center);
          cursor: pointer;


          img {
            width: 20px;
            margin-right: 10px;
          }

          .active {
            color: #fff;
          }

          span {
            font-size: 14px;
            color: #98a7b5;
          }
        }
      }
      .nocollpse {
        width: 218px;
        opacity: 0;
        position: absolute;
        top: 0px;
        transform: scale(0);
        left: 70px;
        background-color: rgb(32, 34, 38);
        transition: all 0.3s ease-in-out;
        z-index: 12;
        overflow: hidden;
        transform-origin: left top;
        li {
          padding-left: 40px;
          &:hover {
            background-color: rgb(26, 27, 30);

            span {
              color: #fff;
            }
          }

          height: 40px;
          @include flex(row, flex-start, center);
          cursor: pointer;


          img {
            width: 20px;
            margin-right: 10px;
          }

          .active {
            color: #fff;
          }

          span {
            font-size: 14px;
            color: #98a7b5;
          }
        }
      }
      .ishover {
        width: 218px;
        opacity: 1;
        transform: scale(1);
      }

      >div {
        height: 40px;
        @include flex(row, flex-start, center);
        width: 100%;
        padding: 0 20px;

        &:hover {
          cursor: pointer;
          background-color: rgb(26, 27, 30);

          span {
            color: #fff;

          }
        }

        >div {
          @include flex(row, flex-start, center);
          width: 100%;
          height: 100%;

          img {
            width: 20px;
            margin-right: 10px;
          }

          .active {
            color: #fff;
          }

          span {
            font-size: 14px;
            color: #98a7b5;
            white-space: nowrap;
          }
        }
      }
    }
  }

}

.Collapse {

  overflow: auto;

  >dl {
    overflow: hidden;
    width: 218px;

    dd {
      overflow: hidden;
    }
  }


}
</style>